<template>
	<view>
		<navbar :back="true" title="寄样管理" bgColor="#FFFFFF" color="#000" leftIconColor="#000"></navbar>
		<view style="background-color: #FFF;padding-bottom: 10rpx;" class="u-border-bottom">
			<view class="p-20">
				<u-search placeholder="输入商品" v-model="params.keyword" shape="round" :showAction="false"
					@search="search">
				</u-search>
			</view>
			<u-tabs :list="tabList" @click="changTab" lineColor="#007DF7" :activeStyle="{'color':'#007DF7'}"
				:current="current" sticky></u-tabs>
		</view>

		<view class="p-20">
			<view v-for="(item,index) in list" :key="index" class="p-20 m-b-20"
				style="background-color: #FFF;border-radius: 20rpx;">
				<view class="u-flex u-row-between">

					<view class="u-flex u-row-left" style="align-items: flex-start;">
						<image :src="item.cover" style="width: 130rpx;height: 130rpx;border-radius: 8rpx;" />
						<view>
							<view class="u-flex u-row-between" style="align-items: flex-start;">
								<view class="m-l-20 w">
									<view style="color: #333333;font-size: 24rpx;line-height: 36rpx;height: 80rpx;"
										class="u-line-2">
										{{item.title}}
									</view>

								</view>
								<view
									style="width: 100rpx;color: #FF9F0E;font-size: 24rpx;text-align: right;margin-top: 5rpx;">
									{{item.statue==0?'待审核':item.statue==1?'待发货':item.statue==2?'运输中':item.statue==3?'已完成':'已拒绝'}}
								</view>
							</view>
							<view class="u-flex u-row-between m-l-20">
								<text style="color: #FF0E29;font-size: 32rpx;">￥{{item.price}}</text>
								<text style="color:#999999;font-size: 24rpx;">
									申请数量：x{{item.num}}
								</text>
							</view>
						</view>
					</view>
				</view>
				<view style="margin: 20rpx 0;"><u-line height="100%" dashed /></view>

				<view style="color: #666666;font-size: 24rpx;line-height: 48rpx;">
					<view class="u-flex u-row-left"> <u-icon name="account" size="32rpx"></u-icon>
						<text class="m-l-20">{{item.name}}</text>
					</view>
					<view class="u-flex u-row-left"> <u-icon name="phone" size="32rpx"></u-icon>
						<text class="m-l-20">{{item.phone}}</text>
					</view>
					<view class="u-flex u-row-left"> <u-icon name="map" size="32rpx"></u-icon>
						<text class="m-l-20">{{item.province}} {{item.city}} {{item.district}} {{item.detail}}</text>
					</view>
				</view>
				<view style="margin: 20rpx 0;"><u-line height="100%" /></view>


				<view class="u-flex u-row-between">
					<text style="color:#999999;font-size: 24rpx;">申请时间：{{item.addTime}}</text>
					<view class="u-flex u-row-left">
						<u-button @tap="fail(item.id)" v-if="item.statue==0" size="mini"
							:customStyle="{border:'1px solid #007DF7',color:'#007DF7',fontSize:'24rpx',height:'56rpx',lineHeight:'56rpx',borderRadius:'8rpx'}">拒绝</u-button>

						<u-button @tap="success(item.id)" v-if="item.statue==0" size="mini" class="m-l-20"
							:customStyle="{background:'#007DF7',color:'#FFF',fontSize:'24rpx',height:'56rpx',lineHeight:'56rpx',borderRadius:'8rpx'}">通过</u-button>

						<u-button @tap="fh(item)" v-if="item.statue==1" size="mini" class="m-l-20"
							:customStyle="{background:'#007DF7',color:'#FFF',fontSize:'24rpx',height:'56rpx',lineHeight:'56rpx',borderRadius:'8rpx'}">发货</u-button>

					</view>
				</view>
			</view>
		</view>
		<u-popup :show="show" @close="show=false" round="20rpx" closeable>
			<view style="height: 600rpx;padding: 30rpx;">
				<view style="color:#333333;font-size: 32rpx;line-height: 100rpx;text-align: center;">物流单号</view>
				<view @click="express()"><u--input v-model="fhParams.expressName" placeholder="请选择" border="surround"
						suffixIcon="arrow-right" readonly></u--input>
				</view>
				<view style="margin-top: 25rpx;">
					<u--input v-model="fhParams.expressNum" placeholder="请填写寄件物流单号" border="surround"></u--input>
				</view>
				<view style="color: #FF0E29;font-size: 24rpx;margin-top: 30rpx;">样品包裹寄出后，在此填写物流单号同步物流信息</view>
				<view class="btn" @tap="delivery()">
					确认
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import navbar from '@/components/baseNavbar.vue'
	import {
		getSamplesList,
		samplesSuccess,
		samplesFail,
		samplesDelivery
	} from '@/api/shopAuth.js'
	export default {
		components: {
			navbar
		},
		onLoad(option) {
			let that = this
			uni.$on("express", (value) => {
				that.$set(that.fhParams, 'expressName', value.label)
				that.$set(that.fhParams, 'expressCode', value.value)
			})
			if (option.statue) {
				let index = this.tabList.findIndex(item => item.statue == option.statue)
				if (index != -1) {
					this.current = index
					this.params.statue = option.statue
				}
			}
			this.getList()

		},
		onUnload() {
			uni.$off("express")
		},
		data() {
			return {
				fhParams: {

				},
				show: false,
				params: {
					keyword: '',
					page: 1,
					limit: 20,
					statue: ''
				},
				list: [],
				current: 0,
				//，-1：拒绝  0:待审核 1：待发货 2：运输中 3：已完成
				tabList: [{
						name: '全部',
						statue: '',
					}, {
						name: '待审核',
						statue: 0,

					}, {
						name: '代发货',
						statue: 1,
					}, {
						name: '运输中',
						statue: 2,
					},
					{
						name: '已完成',
						statue: 3,
					},
					{
						name: '已拒绝',
						statue: -1,
					},
				],
			};
		},
		methods: {
			search(value) {
				this.params.keyword = value
				this.resetList()
			},
			delivery() {
				samplesDelivery(this.fhParams).then(res => {
					this.show = false
					uni.showToast({
						title: "发货成功",
						icon: "none"
					})
					this.resetList()
				})
			},
			express() {
				uni.navigateTo({
					url: "/pages/sub/express"
				})
			},
			fh(item) {
				this.fhParams = {
					id: item.id
				}
				this.show = true
			},
			success(id) {
				samplesSuccess({
					id: id
				}).then(res => {
					this.resetList()
				})
			},
			fail(id) {
				samplesFail({
					id: id
				}).then(res => {
					this.resetList()
				})
			},
			resetList() {
				this.list = []
				this.params.page = 1
				this.loadend = false
				this.loading = false
				this.getList()
			},
			changTab(value) {
				this.params.statue = value.statue
				this.resetList()
			},
			getList() {

				if (this.loadend || this.loading)
					return
				this.loading = true
				getSamplesList(this.params).then(res => {
					this.total = res.data.total
					this.params.page++
					this.$set(this, 'list', this.list.concat(res.data.list))
					this.loading = false
					if (!res.data.hasNextPage)
						this.loadend = true

				}).catch(err => {
					this.loading = false
					this.loadend = true

				})
			},
		},
		onReachBottom() {
			this.getList()
		}
	}
</script>

<style>
	page {
		background-color: #F5F5F5;
	}
</style>

<style lang="scss" scoped>
	.w {
		width: 430rpx;
	}

	.btn {
		margin-top: 100rpx;
		width: 100%;
		line-height: 88rpx;
		background: #007DF7;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		text-align: center;
		font-size: 28rpx;
		color: #FFFFFF;
	}
</style>